<template>
   <!-- 加载图标样式21 -->
   <div class="loading">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
   </div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   height: 48px;
   position: relative;
   width: 48px
}

.shape {
   border-radius: 2px;
   height: 20px;
   position: absolute;
   width: 20px
}

.shape-1 {
   animation: animationShape1 2s linear infinite;
   background-color: #1678ff;
   left: 0
}

.shape-2 {
   animation: animationShape2 2s linear infinite;
   background-color: #04be02;
   right: 0
}

.shape-3 {
   animation: animationShape3 2s linear infinite;
   background-color: #ea4e3d;
   bottom: 0
}

.shape-4 {
   animation: animationShape4 2s linear infinite;
   background-color: #ffaa09;
   bottom: 0;
   right: 0
}

@keyframes animationShape1 {
   0% {
      transform: translate(0)
   }

   25% {
      transform: translateX(17px)
   }

   50% {
      transform: translate(17px, 17px)
   }

   75% {
      transform: translateY(17px)
   }

   to {
      transform: translateX(0)
   }
}

@keyframes animationShape2 {
   0% {
      transform: translate(0)
   }

   25% {
      transform: translateY(17px)
   }

   50% {
      transform: translate(-17px, 17px)
   }

   75% {
      transform: translate(-17px)
   }

   to {
      transform: translate(0)
   }
}

@keyframes animationShape3 {
   0% {
      transform: translate(0)
   }

   25% {
      transform: translateY(-17px)
   }

   50% {
      transform: translate(17px, -17px)
   }

   75% {
      transform: translate(17px)
   }

   to {
      transform: translate(0)
   }
}

@keyframes animationShape4 {
   0% {
      transform: translate(0)
   }

   25% {
      transform: translateX(-17px)
   }

   50% {
      transform: translate(-17px, -17px)
   }

   75% {
      transform: translateY(-17px)
   }

   to {
      transform: translate(0)
   }
}
</style>
